<template>
	<view class="group-page">
		<image class="bg" :src="config.index_img_4" mode="widthFix"></image>
		<view class="btn-box">
			<view class="btn" @click="addGroup">
				<view class="label">进群领福利</view>
				<image class="icon" src="@/static/group-btn.png" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { getConfig } from '@/api/api.js'

	export default {
		data () {
			return {
				config: {},
			}
		},
		onLoad () {
			getConfig().then(res => {
				if (res) {
					this.config = res.data
				}
			})
		},
		methods: {
			addGroup () {
				let urls = [this.config.qun_img]
				
				uni.previewImage({
					urls: urls
				})
			}
		}
	}
</script>

<style lang="scss">
.group-page {
	min-height: 100%;
	background-color: #010633;
	position: relative;
	.bg {
		width: 750rpx;
	}
	.btn-box {
		position: absolute;
		top: 812rpx;
		left: 50%;
		z-index: 10;
		transform: translateX(-50%);
	}
	.btn {
		width: 608rpx;
		height: 88rpx;
		border-radius: 80rpx;
		border: 3rpx solid #fff;
		background: linear-gradient(90deg, #4f65e7, #2ad490);
		display: flex;
		align-items: center;
		justify-content: center;
		animation: scale 1s linear infinite;
		.label {
			color: #fff;
			font-size: 43rpx;
		}
		.icon {
			margin-left: 8rpx;
			width: 60rpx;
			height: 60rpx;
		}
	}
	
	@keyframes scale {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.05);
		}
		0% {
			transform: scale(1);
		}
	}
}
</style>
